// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = ["js", "css"];
const isProduction = process.env.NODE_ENV === "production";

const PrerenderSPAPlugin = require("prerender-spa-plugin");
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

const path = require("path");

function resolve(dir) {
  return path.join(__dirname, dir);
}

// const webpack = require("webpack");
module.exports = {
  // baseUrl: "/",
  // outputDir: 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）
  // outputDir: "dist",
  //用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
  assetsDir: "assets",
  //   lintOnSave：{ type:Boolean default:true } 问你是否使用eslint
  lintOnSave: false,
  //是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。(默认false)
  runtimeCompiler: false,
  /*
   如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
    打包之后发现map文件过大，项目文件体积很大，设置为false就可以不输出map文件
    map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
    有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
  */
  productionSourceMap: false,
  outputDir: process.env.outputDir,

  chainWebpack: (config) => {
    /* 添加分析工具*/
    if (process.env.NODE_ENV === "production") {
      if (process.env.npm_config_report) {
        config.plugin("webpack-bundle-analyzer").use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin).end();
        // config.plugins.delete('prefetch')
      }
    }
    config.resolve.alias.set("@", resolve("src")).set("tim", resolve("src/tim.js")), (config.entry.app = ["babel-polyfill", "./src/main.js"]);
    // 修复HMR
  },
  configureWebpack: (config) => {
    if (isProduction) {
      config.plugins.push(
        new CompressionWebpackPlugin({
          algorithm: "gzip",
          test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
          threshold: 10240,
          minRatio: 0.8,
        })
      );
    }
    if (process.env.NODE_ENV !== "production") {
      return;
    }
    return {
      plugins: [
        new PrerenderSPAPlugin({
          "window.Quill": "quill/dist/quill.js",
          Quill: "quill/dist/quill.js",
          // 生成文件的路径，也可以与webpakc打包的一致。
          // 下面这句话非常重要！！！
          // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
          staticDir: path.join(__dirname, "dist"),
          // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
          routes: ["/"],
          // 这个很重要，如果没有配置这段，也不会进行预编译
          renderer: new Renderer({
            inject: {
              foo: "bar",
            },
            headless: false,
            // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
            renderAfterDocumentEvent: "render-event",
          }),
        }),
      ],
    };
  },

  devServer: {
    // host: "localhost",
    port: 80, // 端口号
    https: false, // https:{type:Boolean}
    open: false, //配置自动启动浏览器
    // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
    // 配置多个代理
    proxy: {
      "/api": {
        // target: "http://app.julongshenghuo.cn/api",
        // target: "http://app.tianyi.run/api",
        target: "http://app-test.3haojishi.cn/api",
        changeOrigin: true,
        pathRewrite: {
          "^/api": "/",
        },
      },
    },
  },
};
